<template>
	<view class="page">
		<view class="title">欢迎回来!</view>
		<u--form labelPosition="top" :model="userInfo" ref="uForm" labelWidth="200">
			<u-form-item label="请输入账号" prop="email">
				<u--input v-model="userInfo.email" placeholder="请输入账号"></u--input>
			</u-form-item>

			<u-form-item label="请输入密码" prop="password">
				<u-input v-model="userInfo.password" placeholder="请输入密码" :type="showPassword ? 'text' : 'password'">
					<template slot="suffix">
						<u-icon color="#787979" size="48rpx" @click="showPassword = !showPassword" :name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<u-checkbox-group v-model="agreement">
			<u-checkbox activeColor="#501c59" name="heihei"></u-checkbox>
			<text class="agreement">我已阅读并同意 《隐私协议》与《用户使用协议》</text>
		</u-checkbox-group>
		<text @click="submit" class="submit">登录</text>
	</view>
</template>

<script>
import httpApi from '../../http/index.js';
export default {
	name: 'login',
	data() {
		return {
			showPassword: false,
			agreement: [],
			userInfo: {
				email: '1045654',
				password: '123123'
			},
			rules: {
				email: {
					type: 'string',
					required: true,
					min: 6,
					message: '请填写账号，并且长度不低于6位',
					trigger: ['blur']
				},
				password: {
					type: 'string',
					required: true,
					min: 6,
					message: '请输入密码，并且长度不低于6位',
					trigger: ['blur']
				}
			}
		};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			if (!this.agreement[0]) {
				uni.$u.toast('请先阅读协议!');
				return;
			}
			this.$refs.uForm
				.validate()
				.then((res) => {
					httpApi.LoginApi.login(this.userInfo).then((res) => {
						console.log(res.data);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('identity', res.data.type);
						uni.setStorageSync('user_id', res.data.user_id);
						uni.switchTab({
							url: '/pages/mall/index/index'
						});
					});
				})
				.catch((errors) => {
					console.log(errors);
					uni.$u.toast('参数有误!');
				});
		}
	}
};
</script>

<style lang="scss">
.page {
	padding: 20rpx 64rpx;
	height: 1740rpx;
	.title {
		margin-top: 40rpx;
		margin-bottom: 98rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 28rpx;
		color: #1e1f20;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
	.agreement {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 34rpx;
		font-style: normal;
	}
	.submit {
		width: 622rpx;
		height: 100rpx;
		background: $uni-theme-color;
		border-radius: 4rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
}
</style>
